<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义组件</title>
    <script src="../vue3.js"></script>
</head>
<body>
<div id="application">
    <my-input v-model="inputText"></my-input>
    <div>{{inputText}}</div>
    <button @click="this.inputText = ''">清空内容</button>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                inputText: ""
            }
        },
        methods: {
            appFunc(title) {
                console.log("单击了自定义组件" + title)
            }
        }
    })
    const inputComponent = {
        methods: {
            inputAction(evnet) {
                this.$emit("update:modelValue", evnet.target.value)
            }
        },
        props: ["modelValue"],
        template: '<div><span>输入框：</span><input :value="modelValue" @input="inputAction"></div>'
    }
    app.component("my-input", inputComponent);
    app.mount("#application")
</script>
</body>
</html>